<template>
  <div class="print-panel">
    <h1 class="title">🖨️ 智能打印中心</h1>
    <section class="section">
      <h2 class="section-title">打印机选择</h2>
      <div class="row">
        <select v-model="printer" @change="fetchOptions" class="select">
          <option v-for="p in printers" :key="p.name" :value="p.name">
            {{ p.name }} <span v-if="p.isDefault">(默认)</span>
          </option>
        </select>
        <button class="btn" @click="fetchPrinters">刷新</button>
      </div>
    </section>

    <section class="section">
      <h2 class="section-title">打印参数</h2>
      <div class="row">
        <label class="label">纸张：</label>
        <select v-model="paperSize" class="select">
          <option v-for="s in options.paperSizes" :key="s" :value="s">{{ s }}</option>
          <option value="custom">自定义</option>
        </select>
        <template v-if="paperSize === 'custom'">
          <div class="custom-size-row">
            <label class="label">宽度(mm)：</label>
            <input type="number" v-model="customWidth" min="10" max="1000" class="input" style="width:90px;" />
            <label class="label" style="margin-left:16px;">长度(mm)：</label>
            <input type="number" v-model="customLength" min="10" max="2000" class="input" style="width:90px;" />
          </div>
        </template>
        <label class="label">方向：</label>
        <select v-model="orientation" class="select">
          <option v-for="o in options.orientations" :key="o" :value="o">
            {{ o === 'portrait' ? '纵向' : '横向' }}
          </option>
        </select>
        <label class="label">份数：</label>
        <input type="number" v-model="copies" :min="options.copies?.min || 1" :max="options.copies?.max || 99" class="input" />
      </div>
    </section>

    <section class="section">
      <h2 class="section-title">上传文件</h2>
      <div class="row">
        <input type="file" multiple @change="onFileChange" class="file-input" />
      </div>
    </section>

    <div class="row center">
      <button class="btn primary" @click="submitPrint">打印</button>
    </div>

    <section class="section">
      <h2 class="section-title">打印任务状态</h2>
      <ul class="job-list">
        <li v-for="job in jobs" :key="job.id" class="job-item">
          <span class="job-id">任务{{ job.id }}:</span>
          <span :class="['job-status', job.status]">{{ job.status }}</span>
          <span class="job-msg">{{ job.message }}</span>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {ListPrinters, GetPrinterOptions, SubmitPrintJob, GetPrintJobStatus} from '../../wailsjs/go/backend/PrintBridge'

const printers = ref([]);
const printer = ref('');
const options = ref({ paperSizes: [], orientations: [], copies: { min: 1, max: 99 } });
const paperSize = ref('');
const orientation = ref('portrait');
const copies = ref(1);
const files = ref([]);
const jobs = ref([]);
const customWidth = ref(210); // 默认A4宽度mm
const customLength = ref(297); // 默认A4长度mm

function fetchPrinters() {
  ListPrinters().then(list => {
    printers.value = list;
    if (list.length > 0) {
      printer.value = list[0].name;
      fetchOptions();
    }
  });
}
function fetchOptions() {
  if (!printer.value) return;
  GetPrinterOptions(printer.value).then(opts => {
    options.value = opts;
    paperSize.value = opts.paperSizes[0] || '';
    orientation.value = opts.orientations[0] || 'portrait';
    copies.value = opts.copies?.min || 1;
    // 自定义纸张时默认A4
    customWidth.value = 210;
    customLength.value = 297;
  });
}
function onFileChange(e) {
  files.value = Array.from(e.target.files);
}
function toBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result.split(',')[1]);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}
async function submitPrint() {
  if (!printer.value || files.value.length === 0) {
    alert('请选择打印机并上传文件');
    return;
  }
  const fileObjs = await Promise.all(files.value.map(file =>
    toBase64(file).then(contentBase64 => ({
      name: file.name,
      contentBase64
    }))
  ));
  const req = {
    printer: printer.value,
    options: {
      paperSize: paperSize.value,
      orientation: orientation.value,
      copies: parseInt(copies.value),
      length: paperSize.value === 'custom' ? parseFloat(customLength.value) : undefined,
      width: paperSize.value === 'custom' ? parseFloat(customWidth.value) : undefined
    },
    files: fileObjs
  };
  SubmitPrintJob(req).then(ids => {
    ids.forEach(id => {
      jobs.value.push({ id, status: '提交中...', message: '' });
      pollJobStatus(id);
    });
  });
}
function pollJobStatus(jobId) {
  function check() {
    GetPrintJobStatus(jobId).then(data => {
      const job = jobs.value.find(j => j.id === jobId);
      if (job) {
        job.status = data.status;
        job.message = data.message || '';
        if (data.status !== 'completed' && data.status !== 'failed') {
          setTimeout(check, 2000);
        }
      }
    });
  }
  check();
}

onMounted(() => {
  fetchPrinters();
});
</script>

<style scoped>
.print-panel {
  max-width: 800px;
  margin: 48px auto;
  background: rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 36px 32px 28px 32px;
  color: #fff;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.title {
  text-align: center;
  font-size: 2.2em;
  font-weight: 700;
  margin-bottom: 28px;
  letter-spacing: 2px;
  color: #e3f2fd;
  text-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.section {
  margin-bottom: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.section-title {
  font-size: 1.18em;
  font-weight: 600;
  margin-bottom: 12px;
  color: #90caf9;
  letter-spacing: 1px;
}
.row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.row.center {
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 24px;
}
.label {
  font-size: 1em;
  color: #b3e5fc;
  margin-right: 4px;
}
.select, .input, .file-input {
  padding: 9px 14px;
  border-radius: 7px;
  border: 1.5px solid #b3e5fc;
  font-size: 1em;
  background: #232b3b;
  color: #fff;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.select:focus, .input:focus, .file-input:focus {
  border: 1.5px solid #4fa3ff;
  box-shadow: 0 0 0 2px #b3e5fc33;
}
.btn {
  padding: 10px 28px;
  border: none;
  border-radius: 7px;
  background: linear-gradient(90deg, #4fa3ff 0%, #6ed0ff 100%);
  color: #fff;
  font-size: 1.08em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(79,163,255,0.10);
}
.btn:hover {
  background: linear-gradient(90deg, #357ae8 0%, #4fa3ff 100%);
  box-shadow: 0 4px 16px rgba(79,163,255,0.18);
}
.btn.primary {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
  color: #222;
  font-weight: bold;
}
.job-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.job-item {
  background: rgba(255,255,255,0.13);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.job-status {
  font-weight: bold;
  margin-left: 8px;
}
.job-status.completed {
  color: #43e97b;
}
.job-status.failed {
  color: #ff5252;
}
.job-id {
  color: #90caf9;
}
.job-msg {
  font-size: 0.97em;
  color: #e3f2fd;
}
.custom-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .print-panel {
    max-width: 98vw;
    padding: 18px 6vw 16px 6vw;
    font-size: 0.98em;
  }
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .custom-size-row {
    gap: 8px;
    margin-left: 0;
  }
}
</style> 